@import '_scss_function';
@keyframes error-bottom-radius{
    0%{
        @include transform(translateY(10px));
    }
    50%{
        @include transform(translateY(-20px));
    }
    100%{
        @include transform(translateY(10px));
    }
}
@-webkit-keyframes error-bottom-radius{
    0%{
        @include transform(translateY(10px));
    }
    50%{
        @include transform(translateY(-20px));
    }
    100%{
        @include transform(translateY(10px));
    }
}
@-o-keyframes error-bottom-radius{
    0%{
        @include transform(translateY(10px));
    }
    50%{
        @include transform(translateY(-20px));
    }
    100%{
        @include transform(translateY(10px));
    }
}
@-moz-keyframes error-bottom-radius{
    0%{
        @include transform(translateY(10px));
    }
    50%{
        @include transform(translateY(-20px));
    }
    100%{
        @include transform(translateY(10px));
    }
}

@keyframes error-earth{
    0%{
        @include transform(rotate(540deg));
    }
    100%{
        @include transform(rotate(180deg));
    }
}
@-webkit-keyframes error-earth{
    0%{
        @include transform(rotate(540deg));
    }
    100%{
        @include transform(rotate(180deg));
    }
}
@-o-keyframes error-earth{
    0%{
        @include transform(rotate(540deg));
    }
    100%{
        @include transform(rotate(180deg));
    }
}
@-moz-keyframes error-earth{
    0%{
        @include transform(rotate(540deg));
    }
    100%{
        @include transform(rotate(180deg));
    }
}

@keyframes error-rocket{
    0%{
        @include transform(translate(-300px,140px));
        opacity:0;
    }
    40%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    65%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    100%{
        @include transform(translate(860px, -270px));
        opacity:0;
    }
}
@-webkit-keyframes error-rocket{
    0%{
        @include transform(translate(-300px,140px));
        opacity:0;
    }
    40%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    65%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    100%{
        @include transform(translate(860px, -270px));
        opacity:0;
    }
}
@-o-keyframes error-rocket{
    0%{
        @include transform(translate(-300px,140px));
        opacity:0;
    }
    40%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    65%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    100%{
        @include transform(translate(860px, -270px));
        opacity:0;
    }
}
@-moz-keyframes error-rocket{
    0%{
        @include transform(translate(-300px,140px));
        opacity:0;
    }
    40%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    65%{
        @include transform(translate(100px,-160px));
        opacity:1;
    }
    100%{
        @include transform(translate(860px, -270px));
        opacity:0;
    }
}

@keyframes error-rocket-find{
    0%{
        @include transform(rotate(55deg));
    }
    55%{
        @include transform(rotate(55deg));
    }
    65%{
        @include transform(rotate(75deg));
    }
    100%{
        @include transform(rotate(75deg));
    }
}
@-webkit-keyframes error-rocket-find{
    0%{
        @include transform(rotate(55deg));
    }
    55%{
        @include transform(rotate(55deg));
    }
    65%{
        @include transform(rotate(75deg));
    }
    100%{
        @include transform(rotate(75deg));
    }
}
@-o-keyframes error-rocket-find{
    0%{
        @include transform(rotate(55deg));
    }
    55%{
        @include transform(rotate(55deg));
    }
    65%{
        @include transform(rotate(75deg));
    }
    100%{
        @include transform(rotate(75deg));
    }
}
@-moz-keyframes error-rocket-find{
    0%{
        @include transform(rotate(55deg));
    }
    55%{
        @include transform(rotate(55deg));
    }
    65%{
        @include transform(rotate(75deg));
    }
    100%{
        @include transform(rotate(75deg));
    }
}

.error-page{
    width: 100%;
    height:490px;
    background-color: #eee;
    position: relative;
    & .error-title{
        text-align: center;
        display: inline-block;
        width:100%;
        margin: 75px 0 45px 0;
        & .tip-status{
            display: inline-block;
            line-height: 90px;
            font-size: 110px;
            color: #bbb;
            font-family: Helvetica,Tahoma,sans-serif,Arial;
            position: relative;
            & .left,
            & .center,
            & .right{
                float: left;
                position: absolute;
                z-index:1;
                top:0;
                opacity:0;
                filter: alpha(opacity=0);
            }
            & .left{
                right:0;
            }
            & .right{
                left: 0;
            }
            & .center{
                top:-90px;
                position: relative;
                margin:0 5px;
                background-color: #eee;
                z-index:2;
                color: #facccc;
            }
        }
        & .text{
            position: relative;
            top:20px;
            opacity:0;
            margin-top: 5px;
            font-size: 20px;
            color: #ccc;
        }
    }
    & .error-title-tow{
        font-size: 16px;
        color: #999;
        text-align: center;
        margin-bottom: 20px;
    }
    & .home{
        @include transition(.5s);
        height:28px;
        line-height: 28px;
        color: #fff;
        background-color: #bbb;
        border-radius: 3px;
        padding: 0 10px;
        & .iconfont{
            margin-right: 5px;
            float: left;
            position: relative;
            top: -1px;
        }
        &:hover{
            background-color: #888;
        }
    }
    & .error-bottom{
        position: absolute;
        bottom:-303px;
        left:0;
        width: 100%;
        height:303px;
        overflow: hidden;
        & .find{
            position: absolute;
            left: 0;
            top:0;
            height:100%;
        }
        & .radius{
            @include transform(translateY(10px));
            position: relative;
            float: left;
            top:-403px;
            width: 214px;
            height:403px;
            background: url("/img/base/error/404-bg-bar.png") no-repeat;
            &.radius-1{
                @include animation(error-bottom-radius,5s,0,infinite,linear);
                top:-260px;
            }
            &.radius-2{
                @include animation(error-bottom-radius,5s,1.3s,infinite,linear);
                top:-200px;
            }
            &.radius-3{
                @include animation(error-bottom-radius,5s,2s,infinite,linear);
                top:-300px;
            }
            &.radius-4{
                @include animation(error-bottom-radius,5s,0.8s,infinite,linear);
                top:-140px;
            }
        }
    }
    & .error-btn-list{
        margin-top: 50px;
        display: inline-block;
        width: 100%;
        text-align: center;
        & .btn{
            @include transition(.5s);
            line-height: inherit;
            color: #bbb;
            margin: 0 15px;
            & .iconfont{
                @include transition(.2s);
                display: block;
                font-size: 50px;
                margin-bottom: 5px;
                position: relative;
            }
            &:hover{
                color: #f2abab;
                & .iconfont{
                    @include transform(translateY(-3px));
                    color: #f2abab;
                }
            }
        }
    }
    & .earth{
        @include transform(rotate(180deg));
        @include animation(error-earth,50s,0,infinite,linear);
        width: 653px;
        height:703px;
        position: fixed;
        left:50%;
        z-index:-1;
        margin: 0 0 0 -306px;
        bottom: -703px;
        background: url('/img/base/error/404-earth.png') no-repeat;
    }
    & .pendant{
        position: fixed;
        left:50%;
        width: 1080px;
        margin-left: -540px;
        bottom: 50px;
        & .radius{
            @include animation(error-bottom-radius,5s,0,infinite,linear);
            background: url('/img/base/error/404-bg-bar.png') no-repeat;
            position: absolute;
            display: none;
            &.radius-1{
                width: 56px;
                height:128px;
                bottom:151px;
                left:56px;
                background-position: 0 -410px;
            }
            &.radius-2{
                width: 44px;
                height:69px;
                bottom:82px;
                left:118px;
                background-position: -60px -410px;
            }
            &.radius-3{
                width: 68px;
                height:132px;
                bottom:121px;
                left:787px;
                background-position: -110px -410px;
            }
        }
        & .icon-404cross{
            @include transform(translateY(10px));
            display: none;
            position: absolute;
            font-size: 21px;
            &.cross1{
                @include animation(error-bottom-radius,5s,2.5s,infinite,linear);
                bottom: 365px;
                left:130px;
            }
            &.cross2{
                @include animation(error-bottom-radius,5s,3s,infinite,linear);
                bottom: 172px;
                left:191px;
            }
            &.cross3{
                @include animation(error-bottom-radius,5s,3.5s,infinite,linear);
                bottom: 125px;
                left:204px;
            }
            &.cross4{
                @include animation(error-bottom-radius,5s,4s,infinite,linear);
                bottom:247px;
                left:525px;
            }
            &.cross5{
                @include animation(error-bottom-radius,5s,4.5s,infinite,linear);
                bottom: 280px;
                left:557px;
            }
            &.cross6{
                @include animation(error-bottom-radius,5s,2.5s,infinite,linear);
                bottom: 331px;
                left:764px;
            }
        }
        & .icon-404circle{
            @include transform(rotate(180deg));
            @include animation(error-earth,8s,0,infinite,linear);
            display: none;
            position: absolute;
            font-size: 25px;
            &.circle1{
                bottom: 90px;
                left:56px;
            }
            &.circle2{
                bottom: 331px;
                left:87px;
            }
            &.circle3{
                bottom: 300px;
                left:150px;
                font-size: 17px;
            }
            &.circle4{
                bottom: 275px;
                left:721px;
            }
            &.circle5{
                bottom: 215px;
                left:845px;
            }
        }
        & .rocket{
            @include animation(error-rocket,10s,2.5s,infinite,cubic-bezier(0, 1.1, 1, 1));
            @include transform(translate(-300px,140px));
            width: 48px;
            height:121px;
            position: absolute;
            left: 300px;
            bottom: 20px;
            & .find{
                @include animation(error-rocket-find,10s,2.5s,infinite,cubic-bezier(0, 1.1, 1, 1));
                float: left;
                width: 100%;
                height:100%;
                background: url('/img/base/error/404-rocket.png') no-repeat;
            }
        }
    }
}
.footer-bottom{
    position: fixed;
    bottom: 0;
}
